<template>
	<view>
		<u-navbar title="手动输入" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="container">
			<u-form :model="form" label-width="180" ref="uForm" :error-type="errorType">
				<view class="box">
					<view class="title">{{vuex_receiveInfo.truckNum}}</view>
					<u-form-item label="进磅时间" prop="timeBeforeWeighing">
						<u-input type="select" v-model="form.timeBeforeWeighing" input-align="right" placeholder="请选择" @click="entryTimeShow = true" />
						<u-picker :safe-area-inset-bottom="true" v-model="entryTimeShow" mode="time" :params="params" @confirm="confirm($event,'timeBeforeWeighing')"></u-picker>
					</u-form-item>
					<u-form-item label="进磅重量(t)" prop="weightBefore">
						<u-input v-model="form.weightBefore" input-align="right" type="number" placeholder="请填写进磅重量" :clearable="false" @input="getActual" />
					</u-form-item>
					<u-form-item label="出磅时间" prop="timeAfterWeighing">
						<u-input type="select" v-model="form.timeAfterWeighing" input-align="right" placeholder="请选择" @click="outTimeShow = true" />
						<u-picker :safe-area-inset-bottom="true" v-model="outTimeShow" mode="time" :params="params" @confirm="confirm($event,'timeAfterWeighing')"></u-picker>
					</u-form-item>
					<u-form-item label="出磅重量(t)" prop="weightAfter">
						<u-input v-model="form.weightAfter" input-align="right" type="number" placeholder="请填写出磅重量" :clearable="false"  @input="getActual" />
					</u-form-item>
					<u-form-item label="实际收货算量" prop="actual">
						<view class="actual">{{form.actual}}m³</view>
					</u-form-item>
				</view>
				<view class="upload-box">
					<u-upload action="" ref="uUpload" :file-list="form.images"></u-upload>
				</view>
			</u-form>
			
			<view class="btn-box">
				<view class="submit" @click="submit">提交</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import configMixins from "../../mixins/config.mixins.js"
	import cascader from "../../components/cascader.vue"
	import moment from "moment"
	export default{
		mixins:[configMixins],
		components:{cascader},
		data(){
			return {
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				//label
				labelStyle:{'padding-left':'20rpx'},	
				errorType:['toast'],
				entryTimeShow:false,
				outTimeShow:false,
				//时间控件参数
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				//表单数据
				form:{
					timeBeforeWeighing:"", //进磅时间
					timeAfterWeighing:"", //出磅时间
					weightBefore:"",//进磅重量
					weightAfter:"",//出磅重量
					images:[],//图片
					actual:0
				},
				//验证
				rules: {
					timeBeforeWeighing:[{required: true, message: '请选择进磅时间', trigger: ['blur']}],
					timeAfterWeighing:[{required: true, message: '请选择出磅时间', trigger: ['blur']}],
					weightBefore:[{required: true, message: '请输入进磅重量', trigger: ['blur']}],
					weightAfter:[{required: true, message: '请输入出磅重量', trigger: ['blur']}],
				}
			}
		},
		onReady() {
			for(let k in this.form){
				this.form[k] = this.vuex_receiveInfo[k] ? this.vuex_receiveInfo[k] : ''
			}
			this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			confirm(e,key){
				this.form[key] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			getActual(){
				if(this.form.weightBefore*1 < this.form.weightAfter*1){
					this.$u.toast('出磅重量不能大于进磅重量')
					return false
				}
				if(this.form.weightBefore && this.form.weightAfter){
					let weight = this.form.weightBefore - this.form.weightAfter
					this.form.actual = Math.round(weight / (this.vuex_receiveInfo.density/1000))
				}
			},
			submit(){
				this.$refs.uForm.validate(valid => {
					if(valid){
						let data = JSON.parse(JSON.stringify(this.form)),images = []
						data.timeBeforeWeighing = moment(data.timeBeforeWeighing).format("YYYY-MM-DD HH:mm:ss")
						data.timeAfterWeighing = moment(data.timeAfterWeighing).format("YYYY-MM-DD HH:mm:ss")
						
						this.$refs.uUpload.lists.map(item => {
							if(item.progress == 100) images.push(item.response)
						})
						data.images = images.toString()
						data.id = this.vuex_receiveInfo.id
						uni.showLoading({
							mask:true
						})
						this.$u.api.orderReceive({receiveGoodsQoList:[data]}).then(res => {
							if(res.code != 0){
								uni.hideLoading()
								this.$u.toast(res.msg)
								return false
							}
							uni.hideLoading()
							uni.navigateBack({
								delta:1
							})
						}).catch(()=>{uni.hideLoading()})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));
		.box{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			.title{
				font-size: 34rpx;
				font-weight: 800;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.info-item{
				.info-hd{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					padding: 20rpx 0;
				}
			}
			.actual{
				text-align: right;
			}
		}
		.concrete{
			.info-item{
				.u-form-item{
					padding: 0;
				}
			}
			.all{
				display: flex;
				justify-content: flex-end;
				font-size: 30rpx;
				font-weight: 600;
				margin-top: 20rpx;
				text{
					color: #1378FF;
				}
			}
		}
		.upload-box{
			padding-top: 10rpx;
		}
	}
	.btn-box{
		padding: 30rpx 0;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
		z-index: 99;
		padding-bottom:calc(30rpx + env(safe-area-inset-bottom)); 
		.submit{
			height: 88rpx;
			background: #1378FF;
			border-radius: 16rpx;
		}
	}
	
</style>
